<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js">
    </script>
    <style>
        .basic {
            border: 1px solid;
        }

        .happy {
            background-color: gray;
        }

        .sad {
            background-color: blue;
        }

        .normal {
            background-color: white;
        }

        .qianfeng1 {
        }

        .qianfeng2 {
        }

        .qianfeng3 {
        }
    </style>
</head>
<body>

<!--
    绑定样式:
        1。class样式
            写法:class="xxx”xxx可以是字符串、对象、数组。
            字符串写法适用于:类名不确定，要动态获取。
            对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
            数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
        2。style样式
            :style="[fontsize: xxx]"其中xxx是动态值。
            :style="[a,b]"其中a、b是样式对象。
-->

<!--准备容器-->
<div id="root">
    <!-- 绑定class 字符串写法  适用于样式的类名不确定 需要动态指定-->
    <div class="basic" :class="a" @click="changeClass">{{name}}</div>

    <!-- 绑定class 数组写法  适用于样式的个数/名字不确定 需要动态指定-->
    <div class="basic" :class="arrClass" @click="changeClass">{{name}}</div>

    <!-- 绑定class 数组写法  适用于样式的个数/名字确定 需要动态决定用不用-->
    <div class="basic" :class="classObj" @click="changeClass">{{name}}</div>

</div>

<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            name:'千锋',
            a:'normal',
            arrClass:['qianfeng1','qianfeng2','qianfeng3'],
            classObj:{
                qianfeng1:false,
                qianfeng2:false
            }
        },
        methods:{
            changeClass(){
                const arr = ['happy','sad','normal'];
                let number = Math.floor(Math.random()*arr.length);
                this.a=arr[number];
            }
        }
    })

</script>
</body>
</html>